@import "themes/var";

.g-field {
  display: flex;
  color: $field-font-color;
}

.g-field-title {
  font-size: $field-font-size;
  height: $field-height;
  line-height: $field-height;

  @include utils-ellipsis();
}

.g-field-title-with-description {
  @extend .g-field-title;

  cursor: help;
  text-decoration: underline dotted;
}

.g-field-help {
  padding: 0 3px;
  color: $field-help-color;
  font-size: $field-font-size;
  line-height: $field-height;
  cursor: pointer;

  &:hover {
    color: $field-hover-color;
  }
}

.g-field-show-placeholder {
  display: block;
  width: 16px;
  margin-right: 4px;
  line-height: $field-height;

  .g-field-show {
    color: $field-help-color;
    cursor: pointer;

    &:hover {
      color: $field-hover-color;
    }
  }
}

.g-field-container {
  width: $field-container-width;
}

.g-field-wp {
  padding: 4px 8px 4px;

  &:first-child {
    padding-top: 16px;
  }

  &:last-child {
    padding-bottom: 16px;
  }

  &.--lv2 {
    margin-bottom: 4px;

    .g-field {
      padding-left: 24px;
      color: $field-font-secondary-color;
    }
  }
}
